<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>购物车页面</title>
    <link rel="stylesheet" href="style/base.css" type="text/css">
    <link rel="stylesheet" href="style/global.css" type="text/css">
    <link rel="stylesheet" href="style/header.css" type="text/css">
    <link rel="stylesheet" href="style/cart.css" type="text/css">
    <link rel="stylesheet" href="style/footer.css" type="text/css">
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/cart1.js"></script>



</head>
<body>
<div id="app">
    <!-- 顶部导航 start -->
    <topnav_topnav></topnav_topnav>
    <!-- 顶部导航 end -->

    <div style="clear:both;"></div>

    <!-- 页面头部 start -->
    <div class="header w990 bc mt15">
        <div class="logo w990">
            <h2 class="fl"><a href="index.html"><img src="images/logo.png" alt="商城"></a></h2>
            <div class="flow fr">
                <ul>
                    <li class="cur">1.我的购物车</li>
                    <li>2.填写核对订单信息</li>
                    <li>3.成功提交订单</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 页面头部 end -->

    <div style="clear:both;"></div>

    <!-- 主体部分 start -->
    <div class="mycart w990 mt10 bc">
        <h2><span>我的购物车</span></h2>
        <table>
            <thead>
            <tr>
                <th class="col1">商品名称</th>
                <th class="col2">商品信息</th>
                <th class="col3">单价</th>
                <th class="col4">数量</th>
                <th class="col5">小计</th>
                <th class="col6">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="cart in carts">
                <td class="col1"><a :href="'goods.html?id='+cart.skuid"><img :src="cart.midlogo" alt=""/></a> <strong><a
                        :href="'goods.html?id='+cart.skuid">{{cart.goods_name}}</a></strong>
                </td>
                <td class="col2">
                    <!--<p>颜色：073深红</p>-->
                    <!--<p>尺码：170/92A/S</p>-->
                    <p v-for="p in cart.spec_info.split(':')">{{p}}</p>

                </td>
                <td class="col3">￥<span>{{cart.price}}</span></td>
                <td class="col4">
                    <a @click.prevent="cart.count--" href="javascript:;" class="reduce_num"></a>
                    <input type="text" name="amount" v-model="cart.count" class="amount"/>
                    <a @click.prevent="cart.count++" href="javascript:;" class="add_num"></a>
                </td>
                <td class="col5">￥<span>{{cart.count*cart.price}}</span></td>
                <td class="col6"><a href="">删除</a></td>
            </tr>

            </tbody>
            <tfoot>
            <tr>
                <td colspan="6">购物金额总计： <strong>￥ <span id="total">{{allPrice}}</span></strong></td>
            </tr>
            </tfoot>
        </table>
        <div class="cart_btn w990 bc mt10">
            <a href="/index.html" class="continue">继续购物</a>
            <a href="" class="checkout">结 算</a>
        </div>
    </div>
    <!-- 主体部分 end -->

    <div style="clear:both;"></div>
    <!-- 底部版权 start -->
    <topnav_bottom></topnav_bottom>
    <!-- 底部版权 end -->
</div>
<script src="js/vue.js"></script>
<script src="js/axios-min.js"></script>
<script src="js/mock-min.js"></script>
<script src="js/api.js"></script>
<script src="js/mock.js"></script>
<script src="components/topnav.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            carts: [],
        },
        methods: {},
        created() {
            getCarts().then(res => {
                this.carts = res.data.data
            })

        },
        computed: {
            // 动态总价
            allPrice: function () {
                var Leclass = 0
                for (i in  this.carts) {
                    cart = this.carts[i]
                    Leclass = Leclass + cart.count * cart.price
                }
                return Leclass
            },
        },
    })
</script>
</body>
</html>
